<template>
    <div class="tab">
        <ul class="tabs">
            <li v-for="(tab, index) in tabs" :key="index" @click="selectTab(tab)"
                :class="{ 'is-active': tab.isActive }">
                {{tab.name}}
            </li>
        </ul>
        <div class="details">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Tab",
        // props: ['tabs'],
        data() {
            return {
                tabs: []
            }
        },
        created() {
            this.tabs = this.$children; // 创建 tabs
        },
        methods: {
            selectTab(selectItem) {
                this.tabs.forEach((tab) => {
                    tab.isActive = (tab.name === selectItem.name)
                })
            }
        }
    }
</script>

<style scoped>
    .tabs li {
        display: inline-block;
        margin-right: 10px;
    }

    .tabs li.is-active {
        border-bottom: 1px solid #ccc;
    }

    .details {
        margin-top: 10px;
        border: 1px solid red;
    }
</style>
